<template>
  <div class="userForm">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm loginForm"
    >
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          name="avatar"
          :auto-upload="false"
          action="http://127.0.0.1:3009/api/v1/auth/reg"
          :show-file-list="false"
          ref="avatarEdit"
          :before-upload="before"
          :on-success="handleAvatarSuccess"
          :on-change="onChange"
        >
          <!-- <el-avatar v-if="imageUrl" :size="100" :src="imageUrl" /> -->
          <img
            v-if="imageUrl"
            :src="imageUrl"
            alt=""
            width="100"
            height="100"
            ref="img"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="ruleForm.nickName"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>

      <el-form-item prop="email" label="邮箱">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
          <el-radio label="2">保密</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "UserForm",
  data() {
    return {
      imageUrl: process.env.VUE_APP_BASE_API + this.$store.state.user.avatar,
      ruleForm: {
        gender: this.$store.state.user.gender,
        email: this.$store.state.user.email,
        phone: this.$store.state.user.phone,
        nickName: this.$store.state.user.nickName,
      },
      rules: {
        nickName: [
          {
            min: 1,
            max: 18,
            message: "长度在 1 到 18 个字符",
            trigger: "blur",
          },
          {
            pattern: /^([\u4e00-\u9fa5]|\d|\w){1,12}$/,
            message: "请输入1-12个汉字、字母、数字和“_”组合",
            trigger: ["blur"],
          },
        ],
        email: [
          { required: false, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"],
          },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^\d{11}$/,
            message: "手机号格式错误",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  created() {
    // console.log(this.$store.state.user.avatar);
  },
  mounted() {
    this.$nextTick(function () {
      this.$on("upload", function () {
        this.$refs.avatarEdit.submit();
      });
    });
  },
  methods: {
    onChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl,URL.createObjectURL(file.raw));
    },
    before(file) {
      console.log(file, "before", this.ruleForm.avatarUpdata);
      if (this.ruleForm.avatarUpdata) {
        return true;
      }
      const isJPG = file.raw.type === "image/jpeg";
      const isPNG = file.raw.type === "image/png";
      const isJPEG = file.raw.type === "image/jpg";
      console.log(isJPG, isPNG, isJPEG);
      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error("上传头像图片只能是 JPG、PNG、JPEG 格式!");
        return false;
      }
      return true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res, "res");
      let mydate = new Date();
      mydate.setDate(mydate.getDate + 15);
      if (res.code == 1) {
        document.cookie = `token=${res.token};expires=${mydate}`;
        this.$store.commit("initUser", JSON.stringify(res.data));
        this.$message({
          message: "注册成功，跳转首页",
          type: "success",
        });
        this.$router.push("/home");
      } else {
        this.$msgbox({
          title: "注册失败",
          message: res.msg,
          type: "warning",
        });
      }
    },
    /* submitForm(formName) {
      this.$refs[formName]?.validate((valid, obj) => {
        if (valid) {
          this.$refs.avatarEdit.submit();
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }, */
  },
};
</script>
<style scoped>
</style>